<template>
  <div id="userStyle">
    <div class="bottomLine">修改用户</div>
    <at-form :model="formUser" ref="formUser" label-width="140px" class="demo-ruleForm" :rules="rules">
      <at-form-item label="用户名称" prop="person_name" project='mh'>
        <at-input v-model="formUser.person_name"></at-input>
      </at-form-item>
      <at-form-item label="用户账号" prop="user_name">
        <at-input v-model="formUser.user_name" disabled></at-input>
      </at-form-item>
      <at-form-item label="机构名称" prop="agency_id" project='mh'>
        <at-select v-model="formUser.agency_id" clearable filterable placeholder="请选择">
          <at-option v-for="(item,key) in nodeSelect" :key="key" :label="item.value" :value="item.key">
          </at-option>
        </at-select>
      </at-form-item>
      <at-form-item label="用户组" prop="user_group_id" project='mh'>
      <at-select
        v-model="formUser.user_group_id"
        multiple
        collapse-tags
        placeholder="请选择">
        <at-option
            v-for="item in options" :key="item.user_group_id" :label="item.user_group_name" :value="item.user_group_id">
        </at-option>
      </at-select>
      </at-form-item>
      <at-form-item label="邮箱" prop="email" project='mh'>
        <at-input v-model="formUser.email"></at-input>
      </at-form-item>
      <at-form-item label="手机号" prop="mobile_phone" project='mh'>
        <at-input v-model.number="formUser.mobile_phone"></at-input>
      </at-form-item>
      <at-form-item label="备注" prop="remark" project='mh'>
        <at-input v-model="formUser.remark"></at-input>
      </at-form-item>
    </at-form>
    <p class="submitButton">
      <at-button type="primary" @click="submitForm('formUser')">提交</at-button>
        <at-button @click="resetForm('formUser')">取消</at-button>
    </p>
  </div>
</template>
<script>
  import { compileStr } from '../../../../utils/encryption.js'
  import { mapState } from 'vuex'
  export default {
    props: {
      personId: String,
      required: true
    },
    name: 'updateUser',
    data () {
      let re = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
      let pre = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
      var phone = (rule, value, callback) => {
        if (value === '' || value === null || value === undefined) {
          callback()
        }
        if (pre.test(value) === false) {
          callback(new Error('手机号码格式错误'))
        } else {
          callback()
        }
      }
      var email = (rule, value, callback) => {
        if (value == null) {
          value = ''
          callback()
        }
        if (value === '') {
          callback()
        }
        if (value.length >= 50) {
          callback(new Error('邮箱长度为50'))
        } else {
          if (re.test(value) === false) {
            callback(new Error('邮箱格式错误'))
          } else {
            callback()
          }
        }
      }
      var personName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('用户名称为必填'))
        } else {
          if (value.length >= 20) {
            callback(new Error('用户名称长度为小于20'))
          } else {
            callback()
          }
        }
      }
      var remark = (rule, value, callback) => {
        if (value === '' || value === null || value === undefined) {
          callback()
        } else {
          if (value.length > 150) {
            callback(new Error('备注长度150以内'))
          } else {
            callback()
          }
        }
      }
      return {
        rules: {
          person_name: { required: true, validator: personName, trigger: 'blur' },
          node_id: { required: true, message: '请选择机构', trigger: 'blur' },
          email: { validator: email, trigger: 'blur' },
          mobile_phone: { validator: phone, trigger: 'blur' },
          remark: { validator: remark, trigger: 'blur' }
        }
      }
    },
    computed: {
      ...mapState({
        options: state => state.group.optionSelect,
        department: state => state.mechanism.departmentList,
        formUser: state => state.users.personal,
        loading: state => state.users.loading,
        nodeSelect: state => state.users.nodeSelect,
        // updataFlag: state => state.mechanism.updataFlag
      })
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var data = JSON.parse(JSON.stringify(this.formUser))
            data.user_group_id = JSON.stringify(this.formUser.user_group_id)
            data.r_person = this.$store.state.system.currentUser.user_name
            for (var key in data) {
              if (data[key] !== null) {
                data[key] = compileStr(data[key])
              }
            }
            this.$store.dispatch('users/updateUser', data)
            this.$store.commit('user/addFlag', false)
            this.$store.commit('user/updataFlag', false)
            this.$store.commit('user/detailedFlag', true)
            if (this.formUser.user_name === this.$store.state.system.currentUser.user_name) {
              this.$store.dispatch('system/auth') // 修改用户信息时重新存入session
            }
          } else {
            return false
          }
        })
      },
      resetForm (formName) {
        this.$store.commit('user/addFlag', false)
        this.$store.commit('user/updataFlag', false)
        this.$store.commit('user/detailedFlag', true)
      }
    },
    watch: {
      updataFlag (val, oldval) {
        this.$store.dispatch('user/getPersonal', { 'person_id': this.personId })
        this.$store.dispatch('group/getOptions', 0)
        this.$store.dispatch('mechanism/getFdepartment')
        this.$store.dispatch('user/mechanism/getNodeselect')
      }
      // formUser (val, oldval) {
      //   for (var i = 0; i < Object.keys(val).length; i++) {
      //     if (val[Object.keys(val)[i]] === 'None' || val[Object.keys(val)[i]] === 'null') {
      //       val[Object.keys(val)[i]] = ''
      //     }
      //   }
      // }
    }
  }
</script>